import React, { useState } from 'react';

import styled from 'styled-components';
import Imgviewer from '@/components/ImgViewer';
import { Row, Col, Checkbox, Switch } from 'antd';

const ColCeilC = styled.table`
  width: 100%;
  td, th {
    border: 1px solid var(--ceil-border);
    padding: 5px 14px;
    height: 55px;
  }
  th {
    color: var(--ceil-header);
    font-size: 14px;
    font-weight: 500;
  }
  tr {
    th {
      background: #FAFAFA;
      font-weight:500;
      color: #444;
      font-size:16px;
    }
    td {
      font-size:14px;
      font-weight:500;
      color: #666;
    }
  }
  td {
    color: var(--ceil-content);
    font-size: 14px;
    font-weight: 500;
  }

  @media print {
    thead tr th {
      color: #000;
      background: #fff !important;
      font-family: 'STSong', 'SimSun';
    }
    p:last-child {
      display: none;
    }
  }
`

const Subtr = styled.tr`
  th {
    font-size: 18px !important;
  }
  @media print {
    th {
      color: #000;
      background: #fff !important;
      font-family: 'STSong', 'SimSun';
    }
  }
`

const MyCheckbox = styled(Checkbox)`
  @media print {
    display: none;
  }
`

const Rectification = ({ data }) => {
  return (
    <tr>
      <td colSpan={7}>
        <Row>
          <Col span={10}>
            <Row>隐患说明：{Array.isArray(data.tags) ? data.tags.join(' ') : '/'}</Row>
            <Row>
              {
                data.images && data.images.map((it, index) =>
                  <Imgviewer
                    key={index}
                    isThumb={true}
                    thumbWidth="80px"
                    thumbHeight="80px"
                    margin='10px 14px 5px 0px'
                    hasText="查看图片"
                    missText="暂无图片"
                    url={it}
                  />
                )
              }
            </Row>
          </Col>
          {
            data.repair && data.repair.remark && <Col span={10} offset={2}>
            <Row>现场处理：{data.repair.remark}</Row>
            <Row>
              {
                Array.isArray(data.repair.images) && data.repair.images.map((it, index) =>
                  <Imgviewer
                    key={index}
                    isThumb={true}
                    thumbWidth="80px"
                    thumbHeight="80px"
                    margin='10px 14px 5px 0px'
                    hasText="查看图片"
                    missText="暂无图片"
                    url={it}
                  />
                )
              }
            </Row>
          </Col>
          }
        </Row>
      </td>
    </tr>
  )
}

export const Ceil = ({ target }) => {

  const [show, setShow] = useState(false)

  return (
    <ColCeilC>
      <thead>
        <tr>
          <th colSpan={8} style={{ fontSize: '18px' }}>
            <Row type="flex" justify="space-between" style={{ margin: '5px 0 -18px 0' }}>
              <p>检查明细</p>
              <p style={{ fontSize: '16px' }}><Switch onChange={() => setShow(!show)}/> 正常项</p>
            </Row>
          </th>
        </tr>
      </thead>
      <tbody>
        {
          Array.isArray(target) && target.map(v => (
            <React.Fragment key={v.id}>
              <Subtr>
                <th colSpan={2}>{v.name || '/'}</th>
                <th>检查总数</th><th>{v.total || 0}</th>
                <th>完好数</th><th>{v && !isNaN(v.count) && !isNaN(v.total) ? (v.total - v.count) : 0 || 0}</th>
                <th>完好率</th><th>{!isNaN(v.rate) ? `${(v.rate)}%` : '0%' || '/'}</th>
              </Subtr>
              {
                v.check && Array.isArray(v.check) && v.check.map(u => (
                  <React.Fragment key={u.id}>
                    <tr>
                      <th colSpan={2}>{u.name || '/'}</th>
                      <th>检查总数</th><th>{u.total || 0}</th>
                      <th>完好数</th><th>{u && !isNaN(u.count) && !isNaN(u.total) ? (u.total - u.count) : 0 || 0}</th>
                      <th>完好率</th><th>{!isNaN(u.rate) ? `${(u.rate)}%` : '0%' || '/'}</th>
                    </tr>
                    {
                      u.child && Array.isArray(u.child) && u.child.map(q => (
                        <React.Fragment key={q.id}>
                          <tr>
                            {
                              (q.question && Array.isArray(q.question) 
                              && (show || q.question.filter(u => u.score !== 100).length) !== 0) && <td colSpan={2} rowSpan={
                                q.question && Array.isArray(q.question) 
                                  ? (show ? q.question.length + q.question.filter(u => u.score !== 100).length : (q.question.filter(u => u.score !== 100).length) + q.question.length )
                                  : 0}
                                >{q.name}</td>
                            }
                            {
                              Array.isArray(q.question) && q.question[0] && (show || (!show && q.question[0].score !== 100)) && <td colSpan={4}>1. {q.question[0].name}</td>
                            }
                            {
                              Array.isArray(q.question) && q.question[0] && (show || (!show && q.question[0].score !== 100)) && <td colSpan={4}><MyCheckbox defaultChecked disabled /> {q.question[0].item}</td>
                            }
                          </tr>
                          {
                            Array.isArray(q.question) && q.question[0].score < 100 && <Rectification data={q.question[0]} />
                          }
                          {
                            Array.isArray(q.question) && Array.isArray(q.question.slice(1)) && q.question.slice(1).map((p, index) => (
                              <React.Fragment key={index}>
                                <tr>
                                  {(show || (!show && p.score !== 100)) && <td colSpan={3}>{ index + 2}. {p.name}</td>}
                                  {(show || (!show && p.score !== 100)) && <td colSpan={4}><MyCheckbox defaultChecked disabled />{p.item}</td>}
                                </tr>
                                {
                                  p.score < 100 && <Rectification data={p} />
                                }
                              </React.Fragment>
                            ))
                          }

                        </React.Fragment>
                      ))
                    }
                  </React.Fragment>
                ))
              }
            </React.Fragment>
          ))
        }
      </tbody>
    </ColCeilC>
  )
};